<template>
  <edit-card title="数据导入" type="add" :loading="submitLoading" @confirm="handleConfirm()">
    <a-form
      ref="formRef"
      :model="formState"
      :rules="rules"
      :label-col="{ style: { width: '120px' } }"
      style="width: 616px"
      label-align="left"
    >
      <a-form-item label="数据处理规则" name="taskRule">
        <div class="w-704">
          <a-form-item-rest>
            <mark-rule
              ref="markRuleRef"
              v-model:taskRule="formState.taskRule"
              :sub-task-type="formState.markSubType"
              @import-format-select-change="updateTaskRule"
              @on-is-mark-change="updateTaskRule"
            />
          </a-form-item-rest>
        </div>
      </a-form-item>
      <a-form-item label="文件" name="fileList" class="upload-item">
        <div class="upload-wrap w-328">
          <file-upload
            ref="videoUploadRef"
            v-model:file-url="formState.fileList"
            :max-file-size="-1"
            :max-count="100"
            upload-text="文件"
            :accept="accept"
          />
        </div>
      </a-form-item>
    </a-form>
  </edit-card>
</template>

<script setup lang="ts">
  import { type FormInstance, message } from 'ant-design-vue'
  import type { Rule } from 'ant-design-vue/es/form'
  import { cloneDeep } from 'g6-fn'
  import { computed, reactive, ref } from 'vue'
  import { useRequest } from 'vue-request'
  import { useRoute, useRouter } from 'vue-router'

  import { dmpTaskApi } from '@/services/api'

  import MarkRule from '../task-edit/components/MarkRule/index.vue'
  import { DmpSubTaskType, DmpTaskType } from '../types/taskType'
  import FileUpload from './components/FileUpload.vue'

  const route = useRoute()
  const router = useRouter()
  const routeParams = route.params
  const routeQuery = route.query
  const markSubType = routeQuery?.markSubType

  const formRef = ref<FormInstance>()
  const formState = reactive<any>({
    taskRule: {},
    markSubType: Number(markSubType),
    fileList: []
  })

  // 规则验证
  const rules: Record<string, Rule[]> = {
    taskRule: [{ required: true, message: '请选择处理规则' }],
    fileList: [{ required: true, message: '请上传文件' }]
  }

  const accept = computed(() => {
    const taskRule = formState.taskRule
    let type = ''
    for (const key in taskRule) {
      if (Object.prototype.hasOwnProperty.call(taskRule, key)) {
        const element = taskRule[key]
        if (key === 'isMark') {
          continue
        }
        if (element?.use) {
          type = key
          break
        }
      }
    }

    const acceptMap: any = {
      excel: 'xls,xlsx',
      imgImg: 'png,jpg,jpeg',
      imgZip: 'zip',
      zip: 'zip',
      txt: 'txt'
    }

    return acceptMap[type]
  })

  const updateTaskRule = () => {
    formState.fileList = []
  }

  const { loading: submitLoading, runAsync: runSubmit } = useRequest<ResponseData<object>>(dmpTaskApi.importData)
  const handleConfirm = async () => {
    await formRef.value?.validate()
    const fileData = (formState.fileList as any[])
      .filter(item => item.status === 'successful')
      .map(item => {
        return {
          fileName: item.name,
          url: item.url
        }
      })
    const params = {
      id: routeParams.id,
      taskRule: formState.taskRule,
      fileData
    }
    console.log(params)
    await runSubmit(params)
    message.success('数据导入成功后，重置序列范围可见')
    router.back()
  }
</script>

<style lang="less" scoped>
  .import-data {
    width: 100%;
    height: 100%;
  }
</style>
